<template>
    <div>
    <el-row>
        <el-col :span="12">
        <div id="main" style="width: 500px;height: 400px"></div>
        </el-col>

        <el-col :span="12">
        <div id="pie" style="width: 500px;height: 400px"></div>
        </el-col>
    </el-row>
    </div>
</template>

<script>

    import * as echarts from 'echarts';
export default {
name: "chatView",
    data(){
       return{
        owner:'',
        meat:'',
        seafood:'',
           vegetable:'',
           saleName:'',
           countMeat:'',
           countSeaFood:'',
           countFruit:''
       }
    },
    mounted() {
        const meatDom = document.getElementById('main');
        const meatChart = echarts.init(meatDom);
        let meatOption;

        meatOption = {
            title: {
                text: '各农产品收益图',
                subtext: '(单位：元)'
            },
            tooltip : {  //鼠标聚焦显示名称和数量
                trigger: 'axis'
            },
            toolbox: {  //切换线状态和下载成图片的功能
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,//可计算的
            xAxis: {
                type: 'category',
                data: ['活禽肉蛋', '蔬菜五谷', '海鲜干货']
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: [],
                    type: 'bar'
                }
            ],
        };


        const seaDom = document.getElementById('pie');
        const seaChart = echarts.init(seaDom);
        let seaOption;

        seaOption = {
            title: {
                text: '仓库存量图',
                subtext: '饼图分布',
                left: 'center'
            },
            tooltip : { //百分比计算
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            calculable : true,
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series: [
                {
                    name: '仓库存量',
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

            this.request.get("/order/countPrice",{
                params: {
                    saleName: localStorage.getItem("userName")
                }
            }).then(res =>{
                console.log("meat",res.data)
                meatOption.series[0].data=[
                    res.data.countMeat,
                    res.data.countFruit,
                    res.data.countSeaFood
                ]
                meatChart.setOption(meatOption);
            })



            this.request.get("/warehouse/countNum",{
                params: {
                    owner: localStorage.getItem("userName")
                }
            }).then(res =>{
                seaOption.series[0].data=[
                    {name:"活禽肉蛋",value:res.data.meat},
                    {name:"海鲜干货",value:res.data.seafood},
                    {name:"果蔬五谷",value:res.data.vegetable}
                ]
                seaChart.setOption(seaOption);
            })

    },

    methods:{

    }
}
</script>

<style>
    .headerBg{
        background: #cccccc !important;
    }
</style>